<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 
      js数据类型:
        - 基本类型 
          - string
          - number
          - boolean
          - null
          - undefined
          - Symbol
          - bigInt
        - 引用类型
          - Object
     -->
    <div id="app">
      <h2>模板语法</h2>
      <!-- 
        文本插值: 可以用双大括号将data的数据显示在模板中
        将除了null和undefined以外的所有的数据类型都转成字符串再进行显示

        可以使用v-html指令将带标签的字符串进行解析
        相当于innerHtml
        只能对我们信得过的内容使用v-html，可能会造成xss攻击

        v-text指令相当于innerText，不会对内容进行解析

        需要对标签属性使用变量，需要使用v-bind指令

        不管是双大括号还是v-bind，都是可以直接使用js表达式的
        数字的运算
        三元表达式
        短路运算
        字符串拼接
        对象和数组的点运算
       -->
      <p>msg: {{ msg }}</p>
      <p>count: {{ count + 3 }}</p>
      <p>show: {{ show }}</p>
      <p>nl: {{ nl }}</p>
      <p>und: {{ und }}</p>
      <p>arr: {{ arr }}</p>
      <p>obj: {{ obj }}</p>
      <p>fn: {{ fn }}</p>
      <!-- <div>content: {{ content }}</div> -->
      <div v-html="content"></div>
      <div v-text="content"></div>

      <!-- <img v-bind:src="url" alt="" v-bind:title="title" /> -->
      <img :src="url" alt="" :title="title + '!!!!!!'" />

      <input type="text" :disabled="disabled" />

      <!-- <div :id="id" :class="className"></div> -->
      <div v-bind="obj2"></div>
    </div>

    <script src="./lib/vue3.js"></script>
    <script>
      // const { createApp } = Vue;

      Vue.createApp({
        data() {
          return {
            msg: "hello",
            count: 5,
            show: false,
            nl: null,
            und: undefined,
            arr: [1, 2, 3, 4, 5],
            obj: { a: 3, b: 4 },
            fn() {
              return 123;
            },
            content: "<h1>这是标题</h1>",
            title: "这是一张百度图片",
            url: "https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png",
            disabled: false,
            // id: "container",
            // className: "wrapper",
            obj2: {
              id: "container",
              class: "wrapper",
            },
          };
        },
        // 可以当作是window.onload方法
        // mounted() {
        //   setInterval(() => {
        //     this.count++;
        //   }, 1000);
        // },
      }).mount("#app");
    </script>
  </body>
</html>
